import "./ArticleBtn.scss";
import {ReactComponent} from "../../class/ReactComponent";
import React from "react";
import {TableArticleList} from "../../../common/class/TableArticleList";
import {Link} from "react-router-dom";

export namespace ArticleBtn {
    export interface Props extends ReactComponent.Props {
        articleInfo: TableArticleList.Data;
    }

    export interface State extends ReactComponent.State {
    }
}

export class ArticleBtn extends ReactComponent<ArticleBtn.Props, ArticleBtn.State> {
    public render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> {
        const articleInfo = this.props.articleInfo;
        return (<div className={this.getClsNameOf()} title={articleInfo.name}>
            <Link to={`/read/article/` + articleInfo.id}>{articleInfo.name}</Link>
        </div>);
    }
    protected getClsNameOf() {
        let baseName = this.getClsName("article-btn-component");
        const articleInfo = this.props.articleInfo;
        const readNum = articleInfo.read_num || 0;
        const imgNum = articleInfo.img_num || 0;
        if (!imgNum || !readNum) {
            baseName += " not-read";
        } else if ((imgNum - 1) <= readNum) {
            baseName += " read-completed";
        } else {
            baseName += " read-part";
        }
        return baseName;
    }
}
